<template>
	<view class="aiWriting_box">
		<view class="content">
			<view class="textarea">
				<u-textarea height="200rpx" maxlength="400" v-model="writing" border="false"
					placeholderClass="placeClass" placeholder="请输入您的文章需求，例如，请写一篇关于春天的文章，800字左右。">
				</u-textarea>
			</view>
			<view class="tools">
				<view class="tools_left">
					<view class="left" @click="delWriting">
						<u-icon name="trash" size="18" color="#999999"></u-icon>
						<text class="text">清除文本</text>
					</view>
					<view class="right" @click="goTextDetection">
						<text class="text">历史记录</text>
					</view>
				</view>
				<view class="tools_right">
					<text class="text">字数 {{writing.length}}</text>
				</view>
			</view>
		</view>
		<view class="basyel">
			<view class="mast">
				<image src="../../static/create/bts.png" mode="widthFix" style="height: 31.4rpx;width: 31.4rpx;">
				</image>
				<text>示例</text>
			</view>
			<view class="center" v-for="(item,index) in tablist" :key="index" @click="wetImage(item.context)">
				<view class="as">
					{{item.title}}
				</view>
				<text>|</text>
				<view class="bs">
					{{item.context}}
				</view>
				<image src="../../static/create/dc.png" mode=""></image>
			</view>
		</view>
		<view class="button">
			<view class="button_right">
				<u-button text="一键创作" color="#1EB930" size="large" @click="highOriginal"></u-button>
				<!--				<view class="right_other">-->
				<!--					<text>每次改写都不同</text>-->
				<!--				</view>-->
			</view>
		</view>
		<!--  进度条  -->
		<view class="schedule-page" v-if="scheduleShow">
			<view class="schedule-box">
				<view class="schedule-text">创作中，请稍后</view>
				<view class="lineBox">
					<view class="lineAnimation" v-for="(item,index) in arrIndex" :key="index"
						:style="{'width':item.width+'%'}">
						<view v-if="item.widthChildren>0" class="lineAnimation-children"
							:style="{'width':item.widthChildren+'%'}"></view>
					</view>
				</view>
				<view class="schedule-number">{{schedule}}%</view>
			</view>
		</view>

		<view style="width: 100%; height: 31rpx;background-color: #f4f4f4;"></view>
		<!-- 非会员看广告提示 -->
		<!-- <u-modal :show="vipShow" :title="'温馨提示'" :content="content" cancelText="取消" confirmText="去开通"
			showCancelButton="true" @cancel="cancel" @confirm="govip" :closeOnClickOverlay="true"
			@close="vipShow = false"></u-modal> -->

		<u-popup :show="vipShow" mode="center" @close="closeFree" :closeable="false" :closeOnClickOverlay="false"
			round="12" :safe-area-inset-bottom="false">
			<view class="free">
				<image @tap="closeFree" class="freeclose"
					src="https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/close.png" mode=""></image>
				<image class="freeimg" src="https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/warn.png" mode="">
				</image>
				<view class="freetext">
					想要获得更多次数吗？
				</view>
				<view class="freetexts">
					次数已用完，想要再次使用请开通 会员或去做任务即可！
				</view>
				<view class="freebtn" @tap="govip">
					开通会员
				</view>
				<view class="freebtns" @tap="goFree">
					去做任务
				</view>
			</view>
		</u-popup>

		<!-- 确定的弹出层 -->
		<u-popup :show="statementShow" mode="center" @close="close" :closeable="false" :closeOnClickOverlay="false"
			round="14">
			<view class="statementbox">
				<view class="statement">
					<image src="../../static/home/nosay.png" mode=""></image>
				</view>
				<view class="statemens">
					<image src="../../static/home/jyla.jpg" mode=""></image>
				</view>
				<view class="statementtext">
					你的账号存在违规,请联系客服解封
					如以解封，请删除重进，有五分钟缓冲时间
				</view>
				<view class="surebtnstyle">
					<view class="surebtn" @click="close">
						联系客服
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as TextEncoding from 'text-encoding-shim';
	import cryptoJs from '@/utils/encryptDES.js'
	import {
		isLogin,
		vipType
	} from '@/business/login.js';
	import {
		wxTextDetection
	} from "../../utils/textCheck.js";
	import {
		wycUrl,
		wycUrlApi,
		apiMixUrlApi,
		apiMixUrlKeyApi,
		black
	} from '@/api/assemb.js'
	var diff = require('diff');
	let app = getApp();
	export default {
		data() {

			return {
				tablist: [{
						title: '民间故事',
						context: '写一篇民间故事,话题是妖怪'
					},
					{
						title: '带货文案',
						context: '写一篇电动牙刷的带货文案'
					},
					{
						title: '小说创作',
						context: '写一篇以爱情为主题的小说'
					},
					{
						title: '学生作文',
						context: '写一篇歌颂母爱的初中作文'
					},
					{
						title: '知识问答',
						context: '为什么太阳东升西落?'
					},
					{
						title: '我是大厨',
						context: '番茄炒蛋怎么做?'
					},
				],
				statementShow: false,
				isVip: false,
				content: '您还不是会员,此功能需开通会员才可使用。',
				writing: '',
				creativeResults: '',
				compareResults: [],
				vipShow: false,
				frequency: uni.getStorageSync('frequency'),
				aiLevel: 1,
				originality: 0,
				width: 0,
				arrIndex: [],
				widthIndex: 0,
				schedule: 0,
				scheduleShow: false
			};
		},
		onShow() {
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;

			// this.isVip = true;
			// this.statementShow = true;
			if (uni.getStorageSync('ban')) {
				this.statementShow = true;
			} else {
				this.statementShow = false;
			}
		},
		onLoad(options) {
			//接收app传过来的df并将本地的df替换（新增）
			console.log(options.df, '=111111111111')
			if (options.df) {
				const baseinfo = uni.getStorageSync('baseinfo')
				baseinfo.df = options.df
				uni.setStorageSync("baseinfo", baseinfo)
			}

			this.frequency = uni.getStorageSync('frequency')
		},
		methods: {
			highOriginal() {
				this.aaa()
			},
			historical() {
				let today = new Date();
				let month = today.getMonth() + 1;
				let currentDate = today.getFullYear() + "-" + month + "-" + today.getDate();
				let tooles = {
					title: this.creativeResults,
					time: currentDate
				}
				if (uni.getStorageSync('content')) {
					if (uni.getStorageSync('content').length < 20) {
						let content = uni.getStorageSync('content')
						content.push(tooles)
						uni.setStorageSync('content', content);
					} else if (uni.getStorageSync('content').length = 20) {
						let content = uni.getStorageSync('content').slice(1)
						content.push(tooles)
						uni.setStorageSync('content', content);
					}

				} else {
					console.log('111111111')
					let content = []
					content.push(tooles)
					uni.setStorageSync('content', content);
				}
			},
			wetImage(text) {
				this.writing = text
				console.log(text)
			},
			//进度条
			/**
			 * 跳转充值页面
			 */
			
			aaa() {
				const param = {
					content:'红烧肉怎么做'
				}
				const requestTask = black(param)
                requestTask.onChunkReceived((chunk) => {
					// console.log('1', chunk);
					const arrayBuffer = chunk.data;
					// console.log('arrayBuffer', arrayBuffer);
					const uint8Array = new Uint8Array(arrayBuffer);
					const str = new TextEncoding.TextDecoder('utf-8').decode(uint8Array);
					// 看一下 打印出来的结果
					console.log(str);
				});
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-textarea--disabled {
		background-color: #fff !important;
	}

	/deep/.u-textarea {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/deep/.u-button {
		border-radius: 12rpx !important;
	}

	/deep/.u-icon__icon {
		margin-right: 8rpx !important;
	}

	/deep/.u-checkbox__icon-wrap {
		width: 26rpx !important;
		height: 26rpx !important;
		margin-left: 57rpx;
	}

	/deep/.u-textarea .u-textarea__field {
		line-height: 25px;
	}

	/deep/.u-textarea.data-v-09988a29 {
		background: rgba(0, 0, 0, 0) !important;
	}

	.basyel {
		margin-top: 40rpx;
		width: 696rpx;
		height: 925rpx;
		background: #FFFFFF;
		border-radius: 18rpx;

		.center {
			width: 657rpx;
			height: 121rpx;
			background: #F6F9FF;
			border-radius: 12rpx;
			margin-left: 20rpx;
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			position: relative;

			image {
				height: 24.15rpx;
				width: 13.89rpx;
				position: absolute;
				top: 50rpx;
				right: 30rpx;
			}

			.as {
				margin-left: 20rpx;
				color: #3A80FF;
			}

			text {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3A80FF;
			}

			.bs {
				margin-left: 20rpx;
				color: #333333;
			}
		}

		.mast {
			display: flex;
			margin-left: 25rpx;

			image {
				margin-top: 25rpx;
			}

			text {
				margin-top: 20rpx;
				margin-left: 10rpx;
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	//popou弹出层的代码
	.statementbox {
		width: 620rpx;
		// height: 572rpx;

		.statement {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			image {
				width: 114rpx;
				height: 114rpx;
			}
		}

		.statemens {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			image {
				width: 220rpx;
				height: 66rpx;
			}
		}

		.statementtext {
			// margin-left: 300rpx;
			font-size: 26rpx;
			margin-top: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 115rpx;
			margin-top: 58rpx;
			margin-bottom: 48rpx;
		}

		.surebtnstyle {
			display: flex;
			justify-content: center;

			.surebtn {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				width: 440rpx;
				height: 117rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url("https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/xzybg.png");
			}
		}
	}

	.textarea-placeholder {
		line-height: 30rpx;
	}

	.title {
		line-height: 111rpx;
		margin-left: 268rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		color: #5490FF;
	}

	.result_comparison {
		margin-top: 31rpx;
		margin-bottom: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;

		.results_textarea {
			padding: 0 20rpx 20rpx 20rpx;
		}
	}


	.creative_results {
		padding-bottom: 30rpx;
		margin-top: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		box-sizing: border-box;

		.creative_results_btn {
			margin: auto;
			margin-top: 30rpx;
			width: 333rpx;
		}

	}

	.originality {
		margin-top: 64rpx;

		ul {
			display: flex;

			li {
				display: flex;
				width: 193rpx;
				height: 43rpx;
				font-size: 18rpx;

				.left {
					width: 102rpx;
					height: 43rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 43rpx;
					border-radius: 6rpx 0rpx 0rpx 6rpx;
				}

				.right {
					width: 92rpx;
					height: 43rpx;
					color: #333333;
					text-align: center;
					line-height: 43rpx;
					background-color: #fff;
					border-radius: 0rpx 6rpx 6rpx 0rpx;
				}
			}
		}
	}

	.button {
		margin-top: 62rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.button_left {
			width: 47%;
		}

		.button_right {
			position: relative;
			width: 100%;

			.right_other {
				display: flex;
				align-items: center;
				position: absolute;
				top: -21rpx;
				right: 0;
				width: 154rpx;
				height: 42rpx;
				background: #FF6600;
				border-radius: 21rpx 0rpx 0rpx 21rpx;

				text {
					line-height: 42rpx;
					margin-left: 18rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
		}
	}

	.textarea {
		padding-top: 15rpx;
	}

	.text {
		font-size: 19rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.aiWriting_box {
		padding: 0 27rpx;

		.content {
			width: 696rpx;
			border-radius: 18rpx;
			background-color: #fff;
			margin-top: 20rpx;
		}

		.tools {
			height: 80rpx;
			padding: 0 27rpx;
			display: flex;
			justify-content: space-between;

			.tools_left {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.right {
					margin-left: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.tools_right {
				display: flex;
				align-items: center;
			}
		}
	}

	.free {
		width: 439rpx;
		height: 590rpx;
		text-align: center;

		.freeclose {
			position: absolute;
			width: 45rpx;
			height: 45rpx;
			right: -20rpx;
			top: -20rpx;
		}

		.freeimg {
			width: 143rpx;
			height: 184rpx;
			margin-top: 60rpx;
		}

		.freetext {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 29rpx;
			margin-bottom: 23rpx;
		}

		.freetexts {
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			width: 300rpx;
			margin: 0 auto;
		}

		.freebtn {
			width: 376rpx;
			height: 64rpx;
			background: #358FFF;
			border-radius: 7rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			margin-top: 21rpx;
			margin-bottom: 19rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.freebtns {
			width: 376rpx;
			height: 64rpx;
			border: 1px solid #358FFF;
			border-radius: 7rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #358FFF;
		}
	}
</style>
<style>
	page {
		background-color: #f4f4f4;

	}

	.schedule-page {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(128, 126, 126, 0.8);
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	.schedule-box {
		width: 82%;
		background-color: #fff;
		border-radius: 15rpx;

	}

	.schedule-text {
		text-align: center;
		line-height: 120rpx;
	}

	.schedule {
		width: 100%;
		height: 20rpx;
		margin: 20rpx 0rpx;
	}

	.schedule-number {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2979ff;
	}

	.lineBox {
		width: 90%;
		display: flex;
		justify-content: space-around;
		margin: 0px auto;
		height: 12rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.lineAnimation {
		height: 100%;
		background-color: #bbb9b9;
	}

	.lineAnimation-children {
		height: 100%;
		transition: all 0.5s;
		background-color: #2979ff;
	}
</style>